<template>
  
  <div v-for="(item,index) in arr" :key="index">
    <img alt="" v-image="item" >
  </div>
</template>

<script setup lang="ts">
import { Directive } from "vue"
import def from "../assets/check-circle.png";
///默认一次性引入全部图片文件
const imgList:Record<string,{default:string}> = import.meta.globEager('../assets/img/*.*')
const arr =Object.values(imgList).map(item =>item.default)
console.log('数据',imgList,arr)
const vImage:Directive<HTMLImageElement,string>=(el,bingding)=>{
 console.log('图片',def)
 el.src=def
// 判断元素是否进入视口区
const observice = new IntersectionObserver((enr)=>{
console.log('===',enr)
if(enr[0].intersectionRatio>0){
  el.src=bingding.value
  observice.unobserve(el) // 进入视口区后停止监听
}
})

observice.observe(el) //观察el是否进入可视区
}
</script>

<style scoped>
img {
  width: 600px;
  height: 600px;
}
</style>

